import React, {PureComponent} from "react";
import {connect} from 'react-redux';
import './style.css'
import SiderComponent from './components/SiderComponent'
import ContentMainComponent from './components/ContentMainComponent'
import {Layout} from 'antd';

const {Header, Footer} = Layout;

class Main extends PureComponent {

    state = {
        collapsed: false,
    };

    onCollapse = (collapsed) => {
        this.setState({collapsed});
    };

    render() {
        const contentMarginLeft = this.state.collapsed ? 80 : 200;
        return (
            <Layout>
                <SiderComponent collapsed={this.state.collapsed} onCollapse={this.onCollapse}/>
                <Layout style={{marginLeft: contentMarginLeft}}>
                    <Header style={{background: '#fff', paddingLeft: 16}}>
                        褥羊毛系统
                    </Header>
                    <ContentMainComponent/>
                    <Footer style={{textAlign: 'center'}} className='contentFooter'>
                        Sys RYM ©2019 Created by 褥羊毛 UED
                    </Footer>
                </Layout>
            </Layout>
        )
    }
}

const mapState = (state, ownProps) => ({});

const mapDispatch = (dispatch) => ({});

export default connect(mapState, mapDispatch)(Main);
